<style>
    .my-drop-zone { border: dotted 3px lightgray; height: 100px }
    .nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
    .another-file-over-class { border: dotted 3px green; }
    html, body { height: 100%; }
</style>
<div class="container">

    <div class="row">

        <div class="col-md-3">

            <h4>选择文件</h4>

            <div ng2FileDrop
                 [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
                 (fileOver)="fileOverBase($event)"
                 [uploader]="uploader"
                 class="well my-drop-zone">
                拖拽文件到虚线区域(xls,xlsx)
            </div>

            <br>
            <h4>单个文件(xls,xlsx)</h4>
            <input type="file" ng2FileSelect [uploader]="uploader" [(ngModel)]="file" />
        </div>

        <div class="col-md-9" style="margin-bottom: 40px">

            <h3>Excel导入</h3>
           <!-- <p>Queue length: {{ uploader?.queue?.length }}</p>-->

            <table class="table">
                <thead>
                <tr>
                    <th width="50%">文件名称</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let item of uploader.queue">
                    <td><strong>{{ item?.file?.name }}</strong></td>
                </tr>
                </tbody>
            </table>

            <br>

            <div>
                <div>
                    上传进程
                    <div class="progress" style="">
                        <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
                    </div>
                </div>
                <br>
                <br>
                <button type="button" class="btn btn-success btn-s"
                        (click)="uploader.uploadAll();click()" [disabled]="!uploader.getNotUploadedItems().length">
                    <span class="glyphicon glyphicon-upload"></span> 上传
                </button>
                <button type="button" class="btn btn-warning btn-s"
                        (click)="uploader.cancelAll();click()" [disabled]="!uploader.isUploading">
                    <span class="glyphicon glyphicon-ban-circle"></span> 撤销
                </button>
                <button type="button" class="btn btn-danger btn-s"
                        (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
                    <span class="glyphicon glyphicon-trash"></span> 删除
                </button>
            </div>

        </div>

    </div>

</div>
